<script>
import { UserLogin } from '@ktw/kbus';

export default {
  name: 'Login',
  components: {
    UserLogin,
  },
  data: () => {
    return {
      autoplaySpeed: 5000,
      autofocus: true,
    };
  },
};
</script>

<template>
  <div id="user-login">
    <header>
      <div>
        <!-- <img
          src="~assets/loginimg/logo.png"
          alt="产品图标"
        >
        <span>金拓维大数据可视化智能分析平台</span>-->
        <span style="margin-left:17%">十堰市大数据可视化智能分析平台</span>
      </div>
    </header>
    <Row
      type="flex"
      justify="center"
      style=""
    >
      <Col span="14">
      <Carousel
        :autoplay-speed="autoplaySpeed"
        autoplay
        arrow="never"
        dots="none"
        trigger="hover"
      >
        <Carousel-item>
          <div class="img1" />
        </Carousel-item>
        <Carousel-item>
          <div class="img2" />
        </Carousel-item>
        <Carousel-item>
          <div class="img3" />
        </Carousel-item>
      </Carousel>
        </Col>
      <Col span="10">
      <div>
        <div class="user-form">
          <p>用户登录</p>
          <UserLogin/>
        </div>
      </div>
        </Col>
    </Row>

    <footer> Copyright &copy; 2018 湖北金拓维信息技术有限公司 </footer>
  </div>
</template>

<style lang="less" scoped>
#user-login {
  background: url('~assets/user/user-bg.svg');
  background-color: #292e52;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  height: 100vh;
  padding: 0;

  header {
    text-align: center;

    div {
      padding-top: 30px;
      width: 100%;
      height: 130px;
      text-align: left;
      line-height: 130px;
      overflow: hidden;

      img {
        float: left;
        margin-left: 80px;
        width: 180px;
      }

      span {
        margin-left: 50px;
        float: left;
        height: 100px;
        color: #fff;
        font-size: 28px;
        line-height: 100px;
        letter-spacing: 5px;
      }
    }
  }

  .k-row-flex {
    margin-top: 30px;

    .k-carousel-item {
      & div {
        margin: auto;
        width: 680px;
        height: 580px;
        background-size: 100% 100%;
      }

      .img1 {
        background-image: url('~assets/loginimg/banner1.png');
      }

      .img2 {
        background-image: url('~assets/loginimg/banner2.png');
      }

      .img3 {
        background-image: url('~assets/loginimg/banner3.png');
      }
    }

    .k-col:last-child {
      margin-top: 80px;

      & div {
        margin: auto;
        width: 350px;
        height: 350px;
        background-color: #fff;
        border-radius: 5px;

        .user-form {
          padding-top: 40px;

          p {
            margin-bottom: 10px;
            width: 100%;
            color: #1997fe;
            font-size: 24px;
            text-align: center;
          }

          .userlogin {
            width: 80%;
            margin: 0 auto;
          }
        }
      }
    }
  }

  footer {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 14px;
  }
}
</style>
